<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
       <div class="breadcrumb" v-show="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div> -->
          <div class="breadcrumb" v-if="$route.query.id">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                v-for="item in $route.matched"
                :key="item.path"
              >
                {{ item.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        <!-- 上方表单 -->
        <el-form
          ref="form"
          :inline="true"
          :model="form"
          label-width="70px"
          style="padding-top: 5px"
        >
          <el-row type="flex">
            <el-col :span="18">
              <div class="grid-content bg-purple-light">
                <el-form-item label="标签名称">
                  <el-input v-model="form.name" class="length"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select
                    v-model="form.region"
                    placeholder="请选择"
                    class="length"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button @click="handleClear(form)">清除</el-button>
                  <el-button type="primary" @click="handleFilterChange"
                    >搜索</el-button
                  >
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <!-- 返回上一页 -->
                <el-form-item>
                    <el-button
                      type="text"
                      icon="el-icon-back"
                      @click="$router.back()"
                      v-show="breadcrumb"
                    >
                      返回学科</el-button
                    >
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    @click="handleAdd"
                    >新增标签</el-button
                  >
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 警告框 -->
        <el-alert type="info" :closable="false" show-icon :title="`数据一共 ${total} 条`"> </el-alert>
        <!-- 表单数据 -->
        <el-table
          :data="dataList"
          v-loading="loading"
          style="width: 100%">
          <el-table-column prop="id" type="index" :index='indexFn' label="序号" width="130">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="130">
          </el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称">
             </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="160"
            :formatter="formatDate"
          >
          </el-table-column>
          <el-table-column prop="state" label="状态" :formatter="handleStates">
          </el-table-column>
          <!-- 操作内容 -->
          <el-table-column label="操作">
            <template #default="{ row }" width="150">
              <el-button type="text" @click="handleState(row)">
                {{ row.state ? "禁用" : "启用" }}
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="handleEdit(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="handleDel(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[1,2,3,4,5,6,7,8,9,10,15,20]"
            :page-size="form.pagesize"
            layout="prev,  pager, next,sizes, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 新增弹框 -->
      <tagsAdd ref="ree" :list="list" @tags-add="getList"></tagsAdd>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState, detail } from '@/api/hmmm/tags.js'
import tagsAdd from '../components/tags-add.vue'
import { status } from '@/api/hmmm/constants.js'
import { simple, detail as subDetail } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  name: 'Tags',
  components: {
    tagsAdd
  },
  data () {
    return {
      form: {
        name: '',
        region: '',
        page: 1,
        pagesize: 10
      },
      dataList: [], // 数据列表
      page: 1, // 当前页
      pagesize: 10, // 每页条数
      total: 0, // 总条数
      state: '', // 状态
      showAddDiolog: false,
      status: status,
      // 储存简单学科列表
      list: [],
      loading: false,
      breadcrumb: false,
      value: false
    }
  },

  created () {
    if (this.$route.query.id) {
      this.handleDetail()
      return
    }
    this.getList()
    // 获取简单
    this.handleSimple()
    console.log(this.$route.query, '111111')
  },
  methods: {
    // 1.清空输入框内容
    handleClear (form) {
      this.form = {
        name: '',
        region: '',
        page: 1,
        pagesize: 10
      }
      this.getList()
    },
    // 2. 获取列表数据
    async getList () {
      this.loading = true
      const { data } = await list(
        this.form
      )
      this.dataList = data.items
      this.total = data.counts
      this.loading = false
      // console.log(this.dataList, 3333)
    },
    // 3. 当前每页显示的条数发生变化时
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      // 回到第一页
      this.form.page = 1
      // 拉取更新
      this.getList()
    },
    // 4.当页码发生变化时
    handleCurrentChange (val) {
      this.form.page = val
      // 拉取更新
      // this.getList({ page: this.page })
      this.getList()
    },
    // 5.点击显示弹框
    handleAdd () {
      this.$refs.ree.dialogVisible = true
      // 发送请求
      this.handleSimple()
    },
    // 6.获取学科简单列表
    async handleSimple (data) {
      const res = await simple(data)
      console.log(res, '----')
      this.list = res.data
    },
    // 7.删除操作
    handleDel (id) {
      this.$confirm('是否永久删除数据，不可恢复', '温馨提示', {
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        // 提示用户
        this.$message.success('删除成功')
        if (list.length === 1 && this.page > 1) {
          this.page--
        }
        this.getList()
      })
    },
    // 8.修改操作（回显）
    async handleEdit (row) {
      const { data } = await detail(row)
      console.log(data, 'aaaaaaa')
      // this.list = data
      this.$refs.ree.form = data
      console.log(this.$refs.ree.form, '111')
      // console.log(this.list)
      // this.showAddDiolog = true
      this.$refs.ree.dialogVisible = true
    },
    // 9.点击切换状态
    async handleState (row) {
      console.log(row.state)
      if (row.state === 0) {
        row.state = 1
      } else {
        row.state = 0
      }
      await changeState({ id: row.id, state: row.state })
      this.$message.success('操作成功')
    },
    // 10,处理日期格式
    formatDate (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 11,搜索对应数据
    handleFilterChange () {
      setTimeout(() => {
        this.getList()
      }, 200)
      setTimeout(() => {
        this.form.page = 1
        // const resaa = (this.form.region === 0 || this.form.region === 1)
        if (this.form.name && this.form.region !== '') {
          const arr3 = this.dataList.filter(
            item => item.tagName.indexOf(this.form.name) !== -1 && item.state === this.form.region)
          console.log(arr3, '00000')
          this.dataList = arr3
          this.total = arr3.length
          return
        }
        // 搜索标签标题
        if (this.form.name) {
          const arr1 = this.dataList.filter(item => item.tagName.indexOf(this.form.name) !== -1)
          // console.log(arr1)
          this.dataList = [...arr1]
          this.total = arr1.length
          return
        }
        // 搜索状态
        if (this.form.region === 1 || this.form.region === 0) {
          const arr2 = this.dataList.filter(item => item.state === this.form.region)
          // console.log(arr2)
          this.dataList = [...arr2]
          this.total = arr2.length
        }
      }, 400)

      // console.log(this.dataList)
    },
    // 12.获取学科详情列表
    async handleDetail (id) {
      const { data } = await subDetail({ id: this.$route.query.id })
      this.dataList = [data]
      // 控制按钮和面包屑
      this.breadcrumb = true
    },
    // 13，自定义序号
    indexFn (index) {
      return index + 1 + this.form.pagesize * (this.form.page - 1)
    },
    handleStates (row, column, cellValue, index) {
      return cellValue === 0 ? '已禁用' : '已启用'
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px;
  .breadcrumb {
    padding: 10px 10px;
    border-bottom: 1px solid #cccccc;
  }
  .length {
    width: 170px;
    height: 15px;
  }
  .bg-purple {
    float: right;
  }
  .pagination {
    float: right;
  }
}
</style>
